import React from 'react';
import {SafeAreaView, useWindowDimensions} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {createDrawerNavigator} from '@react-navigation/drawer';

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {Text, View} from 'react-native';

// import HomePage from '@/test/Navigation/HomePage';
import Page1 from '@/test/Navigation/Page1';
import Page2 from '@/test/Navigation/Page2';
import Page3 from '@/test/Navigation/Page3';
import Page4 from '@/test/Navigation/Page4';
import Page5 from '@/test/Navigation/Page5';
import Page6 from '@/test/Navigation/Page6';
import Page7 from '@/test/Navigation/Page7';
import NavigationUtil from '../../utils/navigationUtil';

// StackNavigator
const Stack = createStackNavigator();
const ModeStack = createStackNavigator();
function MainNav() {
  return (
    <Stack.Navigator
      // mode="modal"   //设置modal为时，所有屏幕从下到上而不是从右到左进行动画显示
      initialRouteName="Home"
      /*所有的导航通用*/
      screenOptions={{
        gestureEnabled: false,
        headerTintColor: 'blue', // 标题颜色
        headerBackTitle: '返回',
      }}>
      <Stack.Screen
        name="HomePage"
        component={HomePage}
        options={{
          title: 'My app',
          headerBackTitle: '',
        }}
      />
      <Stack.Screen
        name="Page1"
        component={Page1}
        options={{
          title: 'Page1',
          // headerBackTitle: '返回',
          // headerTitle: 'ssss', //覆盖title
          headerTintColor: 'red', // 标题颜色
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          // headerLeft: () => {
          //   alert('This is a button!');
          // },
          // headerTitleAlign: 'left',
        }}
      />
      <Stack.Screen name="Page2" component={Page2} options={{title: 'Page2'}} />
      <Stack.Screen
        name="Page4"
        component={Page4}
        initialParams={{user: 'Page4'}}
      />
      <Stack.Screen
        name="Page5"
        component={Page5}
        initialParams={{user: 'Page5'}}
      />
    </Stack.Navigator>
  );
}
function StackNav() {
  return (
    <ModeStack.Navigator headerMode="none" mode="modal">
      <ModeStack.Screen
        name="Main"
        component={MainNav}
        options={{
          title: 'Main',
        }}
      />

      <ModeStack.Screen
        name="Page3"
        component={Page3}
        options={{
          title: 'Page3',
        }}
      />
    </ModeStack.Navigator>
  );
}

// createBottomTabNavigator
const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator
      // 导航器首次加载时要渲染的路线的名称。
      initialRouteName="精品店"
      tabBarOptions={{
        activeTintColor: 'red', //活动标签的标签和图标颜色。(选中颜色)
        // activeBackgroundColor: 'blue',
        // inactiveTintColor: 'blue', //非选中颜色
        // showLabel: false, //是否显示标签标签，默认为true
        // showIcon:false //是否显示标签图标，默认为true。
        // style: {                 //底部颜色
        //   backgroundColor: 'red',
        // },
        labelStyle: {
          fontSize: 15,
        },
      }}>
      <Tab.Screen
        name="首页"
        component={Page4}
        options={{
          // tabBarLabel: 'Home', //覆盖name
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="home" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="精品店"
        component={Page5}
        options={{
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="areachart" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="爆款"
        component={Page6}
        options={{
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="menufold" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="我"
        component={Page7}
        options={{
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="mail" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

const MaterialTab = createMaterialBottomTabNavigator();
function MyMaterialTab() {
  return (
    <MaterialTab.Navigator
      initialRouteName="首页"
      // activeColor="#e91e63"
      shifting={true}
      // barStyle={{backgroundColor: '#694fad'}}
      tabBarOptions={{
        // activeTintColor: 'red', //活动标签的标签和图标颜色。(选中颜色)
        labelStyle: {
          fontSize: 15,
        },
      }}>
      <MaterialTab.Screen
        name="首页"
        component={CreateDrawer}
        options={{
          tabBarColor: '#adaa18',
          // tabBarLabel: 'Home', //覆盖name
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="home" size={26} color={color} />
          ),
        }}
      />
      <MaterialTab.Screen
        name="精品店"
        component={createMat}
        options={{
          tabBarColor: '#2bad23',
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="areachart" size={26} color={color} />
          ),
        }}
      />
      <MaterialTab.Screen
        name="爆款"
        component={Page6}
        options={{
          tabBarColor: '#2f57ad',
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="menufold" size={26} color={color} />
          ),
        }}
      />
      <MaterialTab.Screen
        name="我"
        component={Page7}
        options={{
          tabBarColor: '#ad3ea4',
          tabBarIcon: ({focused, color, size}) => (
            <Icon name="mail" size={26} color={color} />
          ),
        }}
      />
    </MaterialTab.Navigator>
  );
}

//抽屉导航
const Drawer = createDrawerNavigator();
function CreateDrawer() {
  const dimensions = useWindowDimensions();
  return (
    <Drawer.Navigator
      initialRouteName="Page5"
      drawerPosition={'left'}
      drawerContentOptions={{
        activeTintColor: '#e91e63',
        itemStyle: {marginVertical: 30},
      }}
      drawerType={{
        backgroundColor: '#35ef76',
        width: 240,
      }}>
      <Drawer.Screen name="Page5" component={Page5} />
      <Drawer.Screen name="Page6" component={Page6} />
      <Drawer.Screen name="Page7" component={Page7} />
    </Drawer.Navigator>
  );
}

function test() {
  return (
    <View>
      <Text>1111</Text>
    </View>
  );
}

//滑
const CreateMatTab = createMaterialTopTabNavigator();
function CreateMat() {
  return NavigationUtil.CreateMaterialTopTabNavigator({
    root: 'TaoBao',
    swipeEnabled: true,
    Screen: [
      {
        name: 'TaoBao',
        page: test,
      },
      {
        name: 'jingdong',
        page: test,
      },
    ],
  });
  /*
      <CreateMatTab.Navigator
    initialRouteName="Page6"
    // tabBarPosition={'top'}
    swipeEnabled="true" //指示是否启用滑动手
    tabBarOptions={{
    labelStyle: {fontSize: 12},
    // tabStyle: {width: 100},
    style: {backgroundColor: 'powderblue'},
    }}
    >
    <CreateMatTab.Screen name="Page5" component={Page5} />
    <CreateMatTab.Screen name="Page6" component={Page6} />
    </CreateMatTab.Navigator>
    */
}

export default function App() {
  return (
    <NavigationContainer
      onStateChange={(state) => console.log('New state is', state)}>
      {/*{StackNav()}*/}
      <CreateMat />
      {/*<MyMaterialTab />*/}
      {/*<createMat></createMat>*/}
    </NavigationContainer>
  );
}
